<template>
  <div class="container">
    <el-dialog title="资源授权" :visible.sync="dialogVisible" @close='closeDialog' :close-on-click-modal='false'>
      <el-tree
        :data="treeMenu"
        node-key="id"
        :props="treeProps"
        ref="treeMenu"
        show-checkbox
        default-expand-all
        :expand-on-click-node="false"
        :default-checked-keys="checkedKeys"
        check-strictly
        @check="clickDeal"
        style="max-height: 360px;overflow: auto"
        v-loading="treeLoading"
      >
        <span class="custom-tree-node" slot-scope="{node, data}">
          <el-tag v-if="data.type === 1" size="small" type="success"><i class="el-icon-folder"></i>&nbsp;目录</el-tag>
          <el-tag v-if="data.type === 2" size="small" type="primary"><i class="el-icon-menu"></i>&nbsp;菜单</el-tag>
          <span v-else-if="data.type === 3"><i class="el-icon-set-up"></i> [操作] </span>
          <span style="margin-left: 10px">{{ data.alias }}</span>
        </span>
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="formDataSubmit()">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import difference from 'lodash/difference'
  export default {
    data () {
      return {
        roleId: '',
        dialogVisible: false,
        treeLoading: false,
        treeMenu: [],
        treeProps: {
          label: 'alias',
          children: 'children'
        },
        checkedKeys: [],
        cacheData: []
      }
    },
    methods: {
      init(params) {
        this.dialogVisible = true
        this.treeMenu = params.data
        this.roleId = params.id
        this.treeLoading = true
        this.$http.get(this.$http.adornUrl(`/sys/role/relMenu/${params.id}`)).then(response => {
          const result = response.data
          if (result && result.code === 200) {
            const data = result.data
            this.cacheData = data
            this.checkedKeys = data
          }
          this.treeLoading = false
        }).catch(reason => {
          this.treeLoading = false
          this.$message({message: reason, type: 'error'})
        })
      },
      clickDeal(currentObj, treeStatus) {
        let selected = treeStatus.checkedKeys.indexOf(currentObj.id)
        if (selected !== -1) {
          this.selectedParent(currentObj)
          this.uniteChildSame(currentObj, true)
        } else {
          if (currentObj.children.length !== 0) {
            this.uniteChildSame(currentObj, false)
          }
        }
      },
      uniteChildSame (treeList, isSelected) {
        this.$refs['treeMenu'].setChecked(treeList.id, isSelected)
        if (treeList.children) {
          for (let i = 0; i < treeList.children.length; i++) {
            this.uniteChildSame(treeList.children[i], isSelected)
          }
        }
      },
      selectedParent (currentObj) {
        let currentNode = this.$refs['treeMenu'].getNode(currentObj)
        if (currentNode.parent.key !== undefined) {
          this.$refs['treeMenu'].setChecked(currentNode.parent, true)
          this.selectedParent(currentNode.parent)
        }
      },
      formDataSubmit() {
        const values = this.$refs['treeMenu'].getCheckedKeys()
        const removeList = difference(this.cacheData, values)
        const addList = difference(values, this.cacheData)
        if (addList.length === 0 && removeList.length === 0) {
          this.$message({message: "授权资源没有变化，请选择！", type: 'warning'})
          return
        }
        const tips = '授权资源'
        const data = {
          add: addList,
          remove: removeList
        }
        this.$http({
          url: this.$http.adornUrl(`/sys/role/auth/${this.roleId}`),
          method: 'put',
          data: this.$http.adornData(data)
        }).then(response => {
          const result = response.data
          if (result && result.code === 200) {
              this.$message({message: tips + result.msg, type: 'success'})
              this.dialogVisible = false
          } else{
            this.$message({message: tips + result.msg, type: 'error'})
          }
        }).catch(reason => {
          this.$message({message: reason, type: 'error'})
          this.dialogVisible = false
        })
      },
      closeDialog(){
        this.roleId = ''
        this.cacheData = []
        this.checkedKeys = []
        this.$refs['treeMenu'].setCheckedKeys([])
      }
    }
  }
</script>
<style>
</style>
